<template>
  <div class="center_bottom">
    <Echart
      :options="options"
      id="bottomLeftChart"
      class="echarts_bottom"
    ></Echart>
  </div>
</template>

<script>
import { currentGET } from "api";
import { graphic } from "echarts";
export default {
  data() {
    return {
      options: {},
    };
  },
  props: {},
  mounted() {
    this.getData();
  },
  methods: {
    getData() {
      this.pageflag = true;
      // currentGET("big6", { companyName: this.companyName }).then((res) => {
      //   console.log("安装计划", res);
      //   if (res.success) {
      //     this.init(res.data);
      //   } else {
      //     this.pageflag = false;
      //     this.$Message({
      //       text: res.msg,
      //       type: "warning",
      //     });
      //   }
      // });
      let data = {
        category: [
          "2024年11月19日",
          "2024年11月20日",
          "2024年11月21日",
          "2024年11月22日",
          "2024年11月23日",
          "2024年11月24日",
          "2024年11月25日",
          "2024年11月26日",
        ],
        barData: [12324, 13946, 15205, 15306, 15318, 15325, 15891, 16605],
        lineData: [1567, 2446, 3456, 4364, 5000, 5502, 7689, 8758],
        rateData: ["1235", "1354", "1543", "1677", "1788", "1965", "2332", "4546"],
      };
      this.init(data);
    },
    init(newData) {
      this.options = {
        tooltip: {
          trigger: "axis",
          backgroundColor: "rgba(0,0,0,.6)",
          borderColor: "rgba(147, 235, 248, .8)",
          textStyle: {
            color: "#FFF",
          },
          formatter: function (params) {
            // // 添加单位
            // var result = params[0].name + "<br>";
            // params.forEach(function (item) {
            //   if (item.value) {
            //     if (item.seriesName == "安装率") {
            //       result +=
            //         item.marker +
            //         " " +
            //         item.seriesName +
            //         " : " +
            //         item.value +
            //         "%</br>";
            //     } else {
            //       result +=
            //         item.marker +
            //         " " +
            //         item.seriesName +
            //         " : " +
            //         item.value +
            //         "个</br>";
            //     }
            //   } else {
            //     result += item.marker + " " + item.seriesName + " :  - </br>";
            //   }
            // });
            // return result;
          },
        },
        legend: {
          data: ["累计走访户数", "累计申报户数", "累计推荐户数"],
          textStyle: {
            color: "#B4B4B4",
          },
          top: "0",
        },
        grid: {
          left: "50px",
          right: "40px",
          bottom: "30px",
          top: "20px",
        },
        xAxis: {
          data: newData.category,
          axisLine: {
            lineStyle: {
              color: "#B4B4B4",
            },
          },
          axisTick: {
            show: false,
          },
        },
        yAxis: [
          {
            splitLine: { show: false },
            axisLine: {
              lineStyle: {
                color: "#B4B4B4",
              },
            },

            axisLabel: {
              formatter: "{value}",
            },
          },
          {
            splitLine: { show: false },
            axisLine: {
              lineStyle: {
                color: "#B4B4B4",
              },
            },
            axisLabel: {
              formatter: "{value}% ",
            },
          },
        ],
        series: [
          {
            name: "累计走访户数",
            type: "bar",
            barWidth: 10,
            itemStyle: {
              borderRadius: 5,
              color: new graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#956FD4" },
                { offset: 1, color: "#3EACE5" },
              ]),
            },
            data: newData.barData,
          },
          // {
          //   name: "累计申报户数",
          //   type: "bar",
          //   barGap: "-100%",
          //   barWidth: 10,
          //   itemStyle: {
          //     borderRadius: 5,
          //     color: new graphic.LinearGradient(0, 0, 0, 1, [
          //       { offset: 0, color: "rgba(156,107,211,0.8)" },
          //       { offset: 0.2, color: "rgba(156,107,211,0.5)" },
          //       { offset: 1, color: "rgba(156,107,211,0.2)" },
          //     ]),
          //   },
          //   z: -12,
          //   data: newData.lineData,
          // },
          {
            name: "累计申报户数",
            type: "line",
            smooth: true,
            showAllSymbol: true,
            symbol: "emptyCircle",
            symbolSize: 8,
            yAxisIndex: 1,
            itemStyle: {
              color: new graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "rgba(156,107,211,0.8)" },
                { offset: 0.2, color: "rgba(156,107,211,0.5)" },
                { offset: 1, color: "rgba(156,107,211,0.2)" },
              ]),
            },
            data: newData.lineData,
          },
          {
            name: "累计推荐户数",
            type: "line",
            smooth: true,
            showAllSymbol: true,
            symbol: "emptyCircle",
            symbolSize: 8,
            yAxisIndex: 1,
            itemStyle: {
              color: "#F02FC2",
            },
            data: newData.rateData,
          },
        ],
      };
    },
  },
};
</script>
<style lang="scss" scoped>
.center_bottom {
  width: 100%;
  height: 100%;

  .echarts_bottom {
    width: 100%;
    height: 100%;
  }
}
</style>
